import React, {
  ReactElement,
  useContext,
  useEffect,
  useMemo,
  useState
} from 'react';
import {
  Animated,
  DeviceEventEmitter,
  Easing,
  Image,
  Text,
  View
} from 'react-native';

import styles from './style';
import { Store } from '../../reducer';
import { signInLight, signInSuccess } from '../../../../constant/resource';
import { setShowSignSuccess, mutePPT, setNeedSign } from '../../actions';
import { phonePx } from '../../../../util/adapt';
import { startCountCoinProgress } from '../../store/coinProgress';
import { CLASS_ROOM_EVENT_SIGN_IN_SUCCESS } from '../../event';
import { SignInSuccessData } from '../../types';
import GetCoinAnimate from '../GetCoinAnimate';

const spinValue: Animated.Value = new Animated.Value(0);
const spinRotate = spinValue.interpolate({
  inputRange: [0, 1], // 输入值
  outputRange: ['0deg', '-360deg'] // 输出值
});

export default (): ReactElement => {
  const [addNumber, setAddNumber] = useState(-1);

  const { state } = useContext(Store);
  const { showSignSuccess, users } = state;

  useEffect((): (() => void) => {
    const subscription = DeviceEventEmitter.addListener(
      CLASS_ROOM_EVENT_SIGN_IN_SUCCESS,
      (data: SignInSuccessData): void => {
        const { addGoldCoinNum } = data;
        setAddNumber(addGoldCoinNum);
      }
    );
    return (): void => {
      if (subscription) {
        subscription.remove();
      }
    };
  }, []);

  useEffect((): void => {
    if (!showSignSuccess) return;

    if (addNumber === 0) {
      setTimeout((): void => {
        mutePPT();
        setNeedSign(false);
        setShowSignSuccess(false);
        startCountCoinProgress();
      }, 1000);
    }
  }, [addNumber, showSignSuccess, users]);

  useEffect((): (() => void) => {
    if (!showSignSuccess) return (): void => {};
    const timer = Animated.loop(
      Animated.timing(spinValue, {
        toValue: 1, // 最终值 为1，这里表示最大旋转 360度
        duration: 15 * 1000,
        easing: Easing.linear,
        useNativeDriver: true
      })
    );
    timer.start();

    return (): void => {
      timer.stop();
    };
  }, [showSignSuccess]);

  return useMemo((): ReactElement => {
    if (!showSignSuccess) return <View />;
    return (
      <View style={styles.container}>
        <View style={styles.content}>
          <Animated.Image
            source={signInLight}
            style={[
              styles.signInLight,
              styles.content,
              { transform: [{ rotate: spinRotate }] }
            ]}
          />
          <Image source={signInSuccess} style={styles.signInSuccess} />
          <View style={styles.coinContent}>
            {addNumber > 0 && (
              <GetCoinAnimate
                coinStyle={styles.coinList}
                addGoldCoinNum={addNumber}
                clearGoldCoinNum={(): void => {
                  setAddNumber(0);
                  mutePPT();
                  setNeedSign(false);
                  setShowSignSuccess(false);
                  startCountCoinProgress();
                }}
                scale={0.56}
                x={phonePx(273.5)}
                y={phonePx(35)}
                needBaseGoldCoin
              >
                <Text style={styles.number}>金币+{addNumber}</Text>
              </GetCoinAnimate>
            )}
          </View>
        </View>
      </View>
    );
  }, [addNumber, showSignSuccess]);
};
